<template>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <template v-if="!loading">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="`/category/${goods.id}`">{{
                goods.name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item :to="`/category/sub/${goods.children_id}`">{{
                goods.children_name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ goods.goods_name }}</el-breadcrumb-item>
        </template>
        <template v-else>
            <skeleton
                width="30px"
                height="18px"
                style="margin-left: 0px"
            ></skeleton>
            <skeleton
                width="30px"
                height="18px"
                style="margin-left: 15px"
            ></skeleton
            ><skeleton
                width="30px"
                height="18px"
                style="margin-left: 15px"
            ></skeleton
            ><skeleton
                width="30px"
                height="18px"
                style="margin-left: 15px"
            ></skeleton
        ></template>
    </el-breadcrumb>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
const { loading, goods } = defineProps({
    loading: {
        default: false,
    },
    goods: {},
})
</script>

<style lang="scss" scoped></style>
